<template>
  <div>
    <el-container>
      <el-header
        ><p>
          <span @click="$router.go(-1)">Home</span
          ><span style="margin: 0px 15px">/</span
          ><span style="color: red">Goods</span>
        </p></el-header
      >
      <el-main>
        <h2 class="bych2">MYCART</h2>
        <el-table
          border
          stripe
          ref="multipleTable"
          :data="$store.state.goodslist"
          tooltip-effect="dark"
          style="width: 100%;text-align:center"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="ITEMS" width="600">
            <template slot-scope="scope">
              <div style="display: flex">
                <img
                  :src="/img/ + scope.row.pic"
                  alt="不见啦"
                  style="width: 150px"
                />
                <div class="bycdd">{{ scope.row.name }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="PRICE" width="200">
            <template slot-scope="scope">
              <div style="font-size: 15px">￥{{ scope.row.price }}</div>
            </template>
          </el-table-column>
          <el-table-column label="QUANTITY">
            <template slot-scope="scope">
              <div>
                <van-stepper v-model="scope.row.num" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="SUBTOTAL">
            <template slot-scope="scope">
              <div style="color: red; font-size: 19px">
                ￥{{ scope.row.num * scope.row.price }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="EDIT">
            <template slot-scope="scope">
              <div>
                <i class="el-icon-delete yy" @click="del(scope.row._id)"></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    del(id) {
      this.$store.commit("delgoods", id);
      this.$message.success("删除成功");
    },
  },
  //生命周期
  created() {},
  mounted() {},
};
</script> 

<style scoped lang="scss">
.yy {
  font-size: 25px;
  cursor: pointer;
}
.bycdd {
  display: flex;
  align-items: center;
  font-size: 18px;
}
.bych2 {
  font-size: 30px;
  letter-spacing: 15px;
}
.el-header {
  width: 100%;
  padding: 0px 25px;
  background: #f0f0f0;
  height: none;
  p {
    span {
      font-size: 15px;
      color: rgb(129, 127, 127);
      cursor: pointer;
    }
  }
}
.el-main {
  padding: 50px 70px;
  background: #f5f7fb;
}
</style>
